<template>
    <div class="myMessage">
        <v-title
            :content="'我的消息'"
            :font-size="20"
        />
        <el-radio-group v-model="radio1" class="m_radio" @input="inputRadioType">
            <el-radio-button label="1">未读消息</el-radio-button>
            <el-radio-button label="2">已读消息</el-radio-button>
        </el-radio-group>



        <div class="item_box">
            <div v-for="item in list" :key="item.id" class="item_c">
                <!-- <el-badge hidden="item.is_read" value="未读"> -->
                    <div class="content_box">
                        <div class="c_tit_time">
                            <p class="tit">{{item.title}}</p>
                            <p>{{item.create_time}}</p>
                        </div>
                        <div class="c_content">
                            <p class="con" @click="goAuction(item)">{{item.content}}</p>
                            <el-button v-if="item.is_read!==1" @click="setMarkRead(item)" size="mini" type="danger" plain round>标记已读</el-button>
                        </div>
                    </div>
                <!-- </el-badge> -->
                    
            </div>
        </div>
    </div>
</template>

<script>
import vBtn from '@/components/title/b-btn.vue'
import vTitle from '@/components/title/a-tip.vue'
import {getUserInfoID} from '@/utils/auth'
import {messageList,click_read} from '@/api/user'
export default{
    components:{
        vTitle,vBtn
    },
    data(){
        return{
            uid:'',
            list:[],
            radio1:'1'
        }
    },
    created(){
        var userInfo = getUserInfoID();
        if(userInfo){
            var info = JSON.parse(userInfo);
            this.uid = info.id;
        }
        this.getMessageList({uid:this.uid,type:'1'});
    },
    methods:{
        getMessageList(obj){
            messageList(obj).then(res =>{
                this.list = res.data;
            });
        },
        setMarkRead(item){
            click_read({id:item.id}).then(res=>{
                this.getMessageList({uid:this.uid,type:'1'});
            })
        },
        inputRadioType(label){
            this.getMessageList({uid:this.uid,type:label});
        },
        //跳转至拍卖会
        goAuction(item){
            if(item.url_id > 0){
                if(item.type==2){
                    this.$router.push({path:'/auction/detail',query: {auctionId:item.url_id}});
                }else if(item.type==4){
                    let {href}= this.$router.resolve({
                        path: '/lots/detail',   // 这里写的是要跳转的路由地址
                        query: {lotsId:item.url_id,auctionid:item.auction_id}// 这里写的是页面参数
                    });
                    window.open(href, '_blank');
                }
                
            }
        }
    }

}
</script>

<style lang="less" scoped>

.myMessage{
    min-height: 100vh;

    /deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
        color: #FFF;
        background-color: #e03e2d;
        border-color: #e03e2d;
        box-shadow: -1px 0 0 0 #e03e2d;
    }
    /deep/.el-radio-button:hover{
        .el-radio-button__inner{
            color: #e03e2d;
        }
       
    }
    .m_radio{
        margin: 20px 0px;
    }



   .item_box{
    margin-top: 20px;
    padding: 0 24px;
        .item_c{
            margin-top: 14px;
            /deep/.el-badge{
                width: 100%;
            }
        }
        .content_box{
            
            border: 1px solid #DCDFE6;
            padding: 18px;
            border-radius: 8px;
            .c_tit_time{
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #909399;
                font-size: 14px;
                font-weight: 600;
                .tit{
                    color: #303133;
                }
            }
            .c_content{
                margin-top: 20px;
                font-size: 14px;
                color:#909399;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .content_box:hover{
            border: 1px solid #DF0000;
            .tit{
                color: #DF0000;
            }
            .c_content{
                
                .con{
                    color: #e03e2d;
                text-decoration:underline;
                }
            }
        }
   }



}


</style>